<template>
    <div>
        <div>歌单</div>
        <ul class="mui-table-view" id="list">
            <li class="mui-table-view-cell mui-media" v-for="(v,i) in searchResNes" :key="i">
                <a href="javascript:;" @click='play(v)'>
                    <img class="mui-media-object mui-pull-right" src="../assets/images/play.png">
                    <div class="mui-media-body">
                        {{v.filename}}
                        <p class="mui-ellipsis">{{v.singername}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchResNes: [],
            // hashNes:''
        }
    },
    computed: {
        searchRes: function() {
            return this.$store.state.mutations.searchRes
        },
        hash: function() {
            return this.$store.state.mutations.Hash
        },
    },
    watch: {
        'searchRes': function(n, o) {
            this.searchResNes = n;
        },
    },
    methods: {
        play(v) {
            var that = this;
            var formdata = new FormData();
            formdata.append('hash', v.hash)
            that.$http({
                url: '/SongInfo',
                method: 'post',
                data: formdata,
            }).then((res) => {
                that.songInfo = res.data.data;
                console.log(res.data);
                this.$store.dispatch('emitHash', res.data.data)
            })
        }
    }
}
</script>
<style scoped>
#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
    background-color: transparent;
    border: 0px;
}

#list {
    background-color: transparent;
}

#list li {
    padding-left: 8px;
}

#list li img {
    width: 27px;
    height: 27px;
}
</style>


